<!--
 * @Author: Huangdong
 * @Date: 2022-03-29 13:54:20
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @LastEditTime: 2025-05-27 19:10:35
 * @FilePath: \02.bldinsure\src\views\count\components\InsuEdit.vue
 * @Description: 
 * 
 * 
-->
<template>
  <van-popup
    v-model="showPop"
    position="bottom"
    :style="{ height: '85%' }"
    :close-on-click-overlay="false"
    sticky
  >
    <div class="pop-title font3 ftc5">险种信息</div>
    <div class="pop-main">
      <div class="pop-content" v-if="showPop">
        <div class="insuBox">
          <div v-if="showType == 'sub'">
            <p class="tip-box-com">
              您可在购买主险的同时，根据自己需求自由选择以下附加险
            </p>
          </div>
          <!-- 刷新key达到刷新组件的目的 -->
          <InsuItem
            v-for="(mainRisk, index) in showRisk"
            :insuData="mainRisk"
            :key="`insur-list${index + totalPrem + new Date().getTime()}`"
          ></InsuItem>
        </div>
      </div>
    </div>
    <div class="fix_foot_box bottomBoxBar">
      <div class="cellBtns">
        <div class="feeBox">
          <span class="preNum font2">{{ totalPrem }}</span
          >元
        </div>
        <div class="sureBtn" @click="saveAction">确定</div>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { mapGetters } from "vuex";
import InsuItem from "./InsuItem";

export default {
  name: "InsuEdit",
  computed: {
    ...mapGetters({
      mainInsu: "risks/mainInsu",
      subInsu: "risks/subRisk",
      showedRisks: "risks/showedRisks",
      totalPrem: "insert/totalPrem",
    }),
    subCheckInsu() {
      return this.showedRisks.filter((todo) => !todo.ismain);
    },
    showRisk() {
      if (this.showType == "main") {
        return this.mainInsu;
      }
      return this.subInsu;
    },
  },
  watch: {
    totalPrem(val, old) {
      if (val !== old) {
        this.$emit("setPrem", val);
      }
    },
  },
  components: {
    InsuItem,
  },
  props: {},
  data() {
    return {
      showPop: false,
      showType: "main", // 主险 main ; 附加险 sub
    };
  },
  created() {},
  mounted() {},
  methods: {
    /**
     * 保存险种信息
     */
    saveAction() {
      let flag = false,
        tipTxt =
          "您当前选择的一年期附加险，未确认自动申请续保，将影响你的保障，请确认是否选择自动申请续保";
      if (this.showType == "sub") {
        const len = this.subCheckInsu.length;
        for (let i = 0; i < len; i++) {
          const item = this.subCheckInsu[i];
          if (item.renewFlag !== void 0 && item.renewFlag !== "-1") {
            flag = true;
            tipTxt = `您当前选择的一年期附加险 “${item.productName}”保证续保，如申请续保，在保证续保期内，您支付续保保险费后完成续保，保证续保期届满，届时我司会重新进行核保（详细规则请阅读产品条款）。在保证续保期间内，按保证续保期间开始时约定的费率，根据续保时被保险人的年龄、是否参加基本医疗保险或公费医疗以及职业类别情况交纳相应的保险费。请确认是否选择自动申请续保`;
            break;
          }
        }
      }
      if (flag) {
        this.$baseConfirm(
          `${tipTxt}`,
          () => {},
          () => {
            this.closePop();
          },
          `重新选择`,
          "不选择"
        );
      } else {
        this.closePop();
      }
    },
    closePop() {
      this.showPop = false;
      this.$emit("sureAction");
    },
    show(type) {
      this.showType = type;
      // 打开初始化
      this.$store.dispatch("risks/setRisks", {});
      this.showPop = true;
      this.$forceUpdate(); // 强制刷新组件
    },
  },
};
</script>

<style lang="less" scoped>
.pop-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 2px;
}

.renew-tip {
  padding: 0 5px;
}

.insuBox {
  background-color: #f2f2f2;
  padding: 2px;
  padding-bottom: 80px;
  min-height: 100%;
}

.pop-main {
  width: 100%;
  height: calc(100% - 100px);
  overflow: hidden;

  .pop-content {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
  }
}

.cellRenew {
  display: flex;
  align-items: center;
  padding: 5px 15px;
  background-color: #fff;
  margin: 5px 5px;
  min-height: 50px;
  justify-content: space-between;
}
.tip-box-com {
  font-size: 12px;
  color: #e7a249;
  line-height: 1.5;
  padding: 4px 14px;
  background-color: #fffbe8;
}
</style>
